<template>
    <v-container grid-list-md text-xs-center class="lottery">
        <h1 class="lottery-title">雅越文化现场抽奖机</h1>
        <h2 class="text-center">剩余人数:{{count}}</h2>
        <div class="lottery-numbers-wrap">
            <v-layout row wrap class="lottery-numbers">
                <v-flex xs3>
                    <v-card class="lottery-number" color="secondary">
                        <v-card-text class="px-0">{{numbers[0]}}</v-card-text>
                    </v-card>
                </v-flex>
                <v-flex xs3>
                    <v-card class="lottery-number" color="secondary">
                        <v-card-text class="px-0">{{numbers[1]}}</v-card-text>
                    </v-card>
                </v-flex>
                <v-flex xs3>
                    <v-card class="lottery-number" color="secondary">
                        <v-card-text class="px-0">{{numbers[2]}}</v-card-text>
                    </v-card>
                </v-flex>
                <v-flex xs3>
                    <v-card class="lottery-number" color="secondary">
                        <v-card-text class="px-0">{{numbers[3]}}</v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
        </div>
        <v-layout justify-center>
            <v-flex xs3>
                <v-btn block class="start-btn" @click="start">开始</v-btn>
            </v-flex>
            <v-flex xs3>
                <v-btn block dark color="yellow darken-4" class="start-btn" @click="stop">停</v-btn>
            </v-flex>
        </v-layout>
        <h1 class="text-center">本轮中奖号码</h1>
        <v-layout justify-center wrap class="result-box">
            <v-flex v-for="item in result" md5 shrink>
                <v-card class="pa-5 result-number deep-orange--text accent-3 display-4
">{{item}}</v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import API from 'src/api/home';
    export default {
        name: "Lottery",
        data() {
            return {
                list: [],
                avatar: '//ossweb-img.qq.com/images/lol/img/champion/Zoe.png',
                running: false,
                finish: false,
                count: 0,
                result: [],
                temp: null,
                intervals: [],
                numbers: [0,0,0,0],
                interval: null
            }
        },
        computed: {
            classify() {
                return this.$route.query.classify;
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                API.listOpen(this.classify)
                    .then(res=>{
                        this.list = res;
                        this.count = this.list.length;
                    })
            },
            start() {
                if(this.running) {

                }else {
                    this.running = true;
                    // 获取获奖名单
                    API.open(new Date().getTime(), this.classify)
                        .then(res => {
                            this.temp = res.number;
                            // 千位随机数组
                            this.interval = setInterval(() => {
                                let random = Math.floor(Math.random() * 10000);
                                this.numbers = this.toNumbers(random);
                            }, 25);
                        }).catch(err=>{
                            alert(err.data.message)
                    })
                }
            },
            stop() {
                clearInterval(this.interval);
                this.running = false;
                this.numbers = this.toNumbers(this.temp);
                this.result.push(this.temp);
                this.count--;
            },
            toNumbers(number) {
                let n0 = Math.floor((number % 10000) / 1000);
                let n1 = Math.floor((number % 1000) / 100);
                let n2 = Math.floor((number % 100) / 10);
                let n3 = Math.floor(number % 10);
                return [n0,n1, n2,n3];
            }
        }
    }
</script>

<style lang="scss">
.lottery {
    position: relative;
    box-sizing: border-box;
    padding: 1vh 5vw 1vh;
    width: 100vw;
    min-height: 100vh;
    color: white;
    background: #439fe0;
    background-size: 100% 100%;
    .lottery-title {
        margin: 0;
        text-align: center;
        font-size: 48px;
    }
    .lottery-numbers-wrap {
        margin-top: 2vh;
        padding: 3vh 3vw;
        background-color: #90A4AE;
    }
    .lottery-number {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 64px;
    }
    .start-btn {
        height: 48px;
        font-size: 32px;
    }
    .result-number {
        letter-spacing: 5px !important;
    }
    @keyframes rotateSelf {
        100% {
            transform: rotateY(720deg);
        }
    }
    @keyframes show {
        100% {
            transform: scale(3.2);
        }
    }
}
</style>